<script setup>
</script>

<template>
  <div class="h-screen bg-[#e3e3e3] font-serif relative select-none overflow-hidden">
    <router-view v-slot="{ Component }">
      <transition :name="transitionName">
        <keep-alive include="index">
          <component :is="Component" />
        </keep-alive>
      </transition>
    </router-view>
  </div>
</template>


<script>
export default {
  name: 'App',
  data() {
    return {
      transitionName: ''
    }
  },
  watch: {
    $route(to, from) {
      if (to.meta.index > from.meta.index) {
        this.transitionName = 'slide-left';
      } else {
        this.transitionName = 'slide-right';
      }
    }
  }
}
</script>


<style>
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 2s;
  position: absolute;
  z-index: 5;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>
